<route lang="json5" type="page">
  {
    style: {
      navigationBarTitleText: '申请转班',
    },
    anonymous: false
  }
</route>

<script lang="ts" setup>
import ClassSelectButton from '../components/ClassSelectButton.vue'
import StudentClassCard from '@/components/StudentClassCard.vue'
import { useUserStore } from '@/stores'
import { ClassApi } from '@/apis'

const userStore = useUserStore()

const originalClass = ref(null)
const targetClass = ref(null)

const selectOriginalClass = () => {
  uni.navigateTo({
    url: `/pages/class/select?type=original`,
  })
}

const selectTargetClass = () => {
  if (!originalClass.value) {
    uni.showToast({
      title: '请先选择转出班级',
      icon: 'none',
    })
    return
  }
  const params = `subject=${originalClass.value.subject}&classYear=${originalClass.value.classYear}&term=${originalClass.value.term}&grade=${originalClass.value.grade}&classCategory=${originalClass.value.classCategory}&unitPrice=${originalClass.value.unitPrice}&originalClassId=${originalClass.value.id}`
  uni.navigateTo({
    url: `/pages/class/select?type=target&${params}`,
  })
}

onShow(() => {
  const original = uni.getStorageSync('originalClass')
  const target = uni.getStorageSync('targetClass')
  if (original) {
    originalClass.value = JSON.parse(original)[0]
    uni.removeStorageSync('originalClass')
  }
  if (target) {
    targetClass.value = JSON.parse(target)[0]
    uni.removeStorageSync('targetClass')
  }
})

const loading = ref(false)
const commitHandle = () => {
  uni.showModal({
    title: '提示',
    content: `确定转入”${targetClass.value.leadTeacherName}”老师”${targetClass.value.name}”班级吗？`,
    async success(res) {
      if (res.confirm) {
        loading.value = true
        const req = {
          oldClassId: originalClass.value.id,
          newClassId: targetClass.value.id,
          studentId: userStore.currentStudent.id,
          onlyRemainLesson: true,
          changeType: 'CHANGE_CLASS',
        }
        try {
          await ClassApi.changeClassOrLesson(req)
          uni.showToast({
            title: '操作成功',
            icon: 'none',
          })
          uni.navigateBack()
        } catch (e) {
          console.warn('操作失败: ', e)
        } finally {
          loading.value = false
        }
      } else if (res.cancel) {
        console.log('用户点击取消')
      }
    },
  })
}
</script>

<template>
  <view v-if="loading" class="flex-row-center-center bg-white page">
    <wd-loading color="#33AD7C" />
  </view>
  <template v-else>
    <view class="content px py">
      <view class="mb-[24rpx] flex-row-between-center">
        <text class="section text-28rpx font-500 text-main">
          转出班级
        </text>
        <view v-if="originalClass">
          <wd-button type="text" size="small" :round="false" @click="selectOriginalClass">
            重新选择
          </wd-button>
        </view>
      </view>
      <StudentClassCard v-if="originalClass" :data="originalClass" />
      <view v-else class="mt-[24rpx]">
        <ClassSelectButton height="180rpx" text="选择转出班级" @click="selectOriginalClass" />
      </view>

      <view class="mt-[24rpx] flex-row-between-center">
        <text class="section text-28rpx font-500 text-main">
          转入班级
        </text>
        <view v-if="targetClass">
          <wd-button type="text" size="small" :round="false" @click="selectTargetClass">
            重新选择
          </wd-button>
        </view>
      </view>
      <view v-if="targetClass" class="mt-[24rpx]">
        <StudentClassCard :data="targetClass" />
      </view>
      <view v-else class="mt-[24rpx]">
        <ClassSelectButton height="180rpx" text="选择转入班级" @click="selectTargetClass" />
      </view>
    </view>

    <view class="footer">
      <view class="px-[30rpx] py-[12rpx]">
        <wd-button block type="success" :disabled="!(originalClass && targetClass)" :round="false" :loading="loading" @click="commitHandle">
          提交申请
        </wd-button>
      </view>
    </view>
  </template>
</template>

<style lang="scss" scoped>
  .content {
    height: calc(100vh - 160rpx) !important;
    overflow: scroll;
  }

  .footer {
    position: fixed;
    left: 0px;
    bottom: 0px;

    height: 160rpx;
    width: 100%;
    background: white;
    box-shadow: 0px -4px 4px 0px #0000000D;

  }
</style>
